import React from 'react'
import Admin from "../../../layout/Admin";
import MoneyModel from "../../../model/money";
import {Card, Checkbox, Table, DatePicker, Select, Popover, Button,} from "antd";
import PaginationFooter from "../../../component/PaginationFooter/PaginationFooter";
import {defaultEnd, defaultStart} from "../../user/user-total/user-total";
import Info from "../../../service/info";
import moment from "moment";
import {downloadExl} from "../../../model/excel";
const {RangePicker} = DatePicker
const log = console.log.bind(console)

class Money extends React.Component {
    constructor(props) {
        super(props)
        this.model = new MoneyModel()
        this.state = {
            detail: {
                total: 0,
                withdraw: 0,
                gold: 0,
                serve: 0,
            },
            today: {
                total: 0,
                withdraw: 0,
                gold: 0,
                serve: 0,
            },
            yesterday: {
                total: 0,
                withdraw: 0,
                gold: 0,
                serve: 0,
            },
            list: [],
            dateList: [],
            type: 0,
            p: 0,
            timeCheck: false,
            start: defaultStart,
            end: defaultEnd,
            dateTotal: 0,
            iosDateTotal: 0,
            aodDateTotal: 0,
            h5DateTotal: 0,
        }
        this.columns = [
            // CreateT: "2021-02-01T07:30:16.543073Z"
            // Dealno: "20210201153016_28"
            // Dealtype: 1
            // Gold: 60
            // Id: "827314a8-483d-443a-909b-0cd629caebc5"
            // Mark: ""
            // Money: 6
            // Paytype: 2
            // State: 2
            // Total: 40105
            // Transid: "1000000772090113"
            // Username: "okNeEwfkSgGHtK1xsKUFuKcHHsHM"
            {
                title: '交易时间',
                dataIndex: 'Createtint',
                render: text => {
                    return moment(new Date(text * 1000)).format('YYYY-MM-DD HH:mm:ss')
                    const array = text.slice(0, '2021-01-18T13:46:54'.length).split('T')
                    const date = array[1].split(':')
                    date[0] = parseInt(date[0]) + 8
                    array[1] = date.join(':')
                    const result = array.join(' ')
                    return result
                }
            },
            {
                title: '用户名',
                dataIndex: 'Username',
            },
            {
                title: '交易编号',
                dataIndex: 'Dealno',
            },
            {
                title: '交易类型',
                dataIndex: 'Dealtype',
                render: (type) => {
                    const types = {
                        1: '金币充值',
                        2: '金币充值',
                        3: '金币充值',
                        4: '金币充值',
                        5: '金币充值',
                        6: '金币充值',
                        100: '普通vip充值',
                        101: 'ai预测购买',
                        201: '超级vip充值',
                        202: '超级vip加量包',
                        203: '超级vip加量包',
                        204: '超级vip加量包',
                    }
                    return types[type]
                }
            },
            {
                title: '支付现金',
                dataIndex: 'Money',
            },
            {
                title: '支付方式',
                dataIndex: 'Paytype',
                render: (type) => {
                    // 1=安卓，2=ios,3=h5
                    const types = {
                        1: '安卓',
                        2: 'IOS',
                        3: 'H5',
                    }
                    return types[type]
                }
            },

            {
                title: '充值金币额度',
                dataIndex: 'Gold',
            },

            {
                title: '操作后余额',
                dataIndex: 'Total',
            },

            {
                title: '状态',
                dataIndex: 'State',
                render: (state, record) => {
                    const states = {
                        1: '未支付',
                        2: '支付成功',
                        3: '已支付 未发放',
                    }
                    if (state === 3) {
                        return <div>
                            <span style={{marginRight: '8px'}}>{states[state]}</span>
                            <a onClick={() => this.compensate(record)}>补发</a>
                        </div>
                    } else {
                        return states[state]
                    }
                }
            }
        ]
    }

    componentDidMount() {
        this.all()
        this.detail()
        this.today()
        this.yesterday()
    }


    all() {
        const params = {
            P: this.state.p,
            Dtype: this.state.type,
            Starttime: 0,
            Endtime: 0,
        }
        if (this.state.timeCheck) {
            // 2006-01-02 15:04:05
            const start = parseInt(this.state.start.format('X'))
            const end = parseInt(this.state.end.format('X'))
            params.Starttime = start
            params.Endtime = end

            this.model.date({
                Starttime: start,
                Endtime: end,
            }).then((res) => {
                const data = res.data
                if (data.ok) {
                    const list = data.info
                    // const total = list.reduce((a, c) => c.Money + a, 0)
                    let total = 0
                    let h5 = 0
                    let ios = 0
                    let aod = 0
                    list.map(data => {
                        const m = data.Realmoney
                        const t = data.Paytype
                        // 1: '安卓',
                        //     2: 'IOS',
                        //     3: 'H5',
                        if (t === 1) {
                            aod += m
                        } else if (t === 2) {
                            ios += m
                        } else if (t === 3) {
                            h5 += m
                        }
                        total += m
                    })
                    this.setState({
                        dateTotal: total,
                        iosDateTotal: ios,
                        aodDateTotal: aod,
                        h5DateTotal: h5,
                        dateList: list,
                    })
                }
            })
        }
        this.model
            .all(params)
            .then(res => {
                const list = res.data.ok
                this.setState({
                    list,
                })
            })
        // this.model
    }

    detail() {
        this.model
            .detail({
                Starttime: 0,
                Endtime: 0,
            })
            .then(res => {
                const data = res.data
                this.setState({
                    detail: {
                        total: data.totalall,
                        withdraw: data.totalwithdraw,
                        gold: data.totalgold,
                        serve: data.totalserve,
                    },
                })
            })
    }

    today() {
        this.model
            .detail({
                Starttime: parseInt(moment().set({hour:0,minute:0,second:0,millisecond:0}).format('X')),
                Endtime: parseInt(moment().format('X')),
            })
            .then(res => {
                const data = res.data
                this.setState({
                    today: {
                        total: data.dayall,
                        withdraw: data.daywithdraw,
                        gold: data.daygold,
                        serve: data.dayserve,
                    }
                })
            })
    }

    yesterday() {
        this.model
            .detail({
                Endtime: parseInt(moment().set({hour:0,minute:0,second:0,millisecond:0}).format('X')),
                Starttime: parseInt(moment().subtract(1, 'day').set({hour:0,minute:0,second:0,millisecond:0}).format('X')),
            })
            .then(res => {
                const data = res.data
                this.setState({
                    yesterday: {
                        total: data.dayall,
                        withdraw: data.daywithdraw,
                        gold: data.daygold,
                        serve: data.dayserve,
                    }
                })
            })
    }

    compensate = (record) => {
        this.model.compensate({Dealno: record.Dealno,})
            .then(res => {
                const data = res.data
                if (data.ok) {
                    Info.success('成功补发')
                    this.all()
                }

            })
    }

    excel = () => {
        const list = this.state.dateList.map(value => ({
            Username: value.Username,
            Dealno: value.Dealno,
            Paytype: {
                1: '安卓',
                2: 'IOS',
                3: 'H5',
            }[value.Paytype],
            Dealtype: {
                1: '金币充值',
                2: '金币充值',
                3: '金币充值',
                4: '金币充值',
                5: '金币充值',
                6: '金币充值',
                100: '普通vip充值',
                101: 'ai预测购买',
                201: '超级vip充值',
                202: '超级vip加量包',
                203: '超级vip加量包',
                204: '超级vip加量包',
            }[value.Dealtype],
            Money: value.Money,
            Gold: value.Gold,
            Total: value.Total,
            State: {
                1: '未支付',
                2: '支付成功',
                3: '已支付 未发放',
            }[value.State],
            Createtint: moment(new Date(value.Createtint * 1000)).format('YYYY-MM-DD HH:mm:ss') ,
        }))
        const headers = {
            Username: '用户名',
            Dealno: '订单号',
            Paytype: '支付方式',
            Dealtype: '订单类型',
            Money: '支付现金',
            Gold: '充值金币额度',
            Total: '操作后余额',
            State: '状态',
            Createtint: '交易时间',
        }
        downloadExl(list, '充值记录.xlsx', '充值记录', headers)
    }

    prevPage = () => {
        this.setState({
            p: this.state.p - 1,
        }, () => this.all())
    }

    nextPage = () => {
        this.setState({
            p: this.state.p + 1,
        }, () => this.all())
    }

    onDateChange = (value,) => {
        const [start, end,] = value
        this.setState({
            start,
            end,
        }, () => {
            // this.get()
            this.all()
        })
    }

    onTypeSelect = (value, option) => {
        this.setState({
            type: value,
            p: 0,
        }, () => this.all())
    }

    render() {
        return <Admin>
            <div className='list-container'>
                <p>充值汇总</p>
                {Object.entries(this.state.detail).map(([key, value,], index) => {
                    const titles = {
                        total: '平台总收入',
                        withdraw: '平台总提现',
                        gold: '总金币充值（金币）',
                        serve: '服务总消费（金币）',
                    }
                    return <Card
                        key={index}
                        title={titles[key]}
                        style={{width: '200px', display: 'inline-block', margin: '8px',}}
                    >{value}</Card>
                })}
                <p>今日充值汇总</p>
                {Object.entries(this.state.today).map(([key, value,], index) => {
                    const titles = {
                        total: '本日平台总收入',
                        withdraw: '本日平台提现',
                        gold: '本日金币充值（金币）',
                        serve: '本日服务消费（金币）',
                    }
                    return <Card
                        key={index}
                        title={titles[key]}
                        style={{width: '200px', display: 'inline-block', margin: '8px',}}
                    >{value}</Card>
                })}
                <p>昨日充值汇总</p>
                {Object.entries(this.state.yesterday).map(([key, value,], index) => {
                    const titles = {
                        total: '昨日平台总收入',
                        withdraw: '昨日平台提现',
                        gold: '昨日金币充值（金币）',
                        serve: '昨日服务消费（金币）',
                    }
                    return <Card
                        key={index}
                        title={titles[key]}
                        style={{width: '200px', display: 'inline-block', margin: '8px',}}
                    >{value}</Card>
                })}
                <div style={{marginBottom: '8px',}}>
                    <Select
                        style={{marginRight: '8px', width: 200}}
                        defaultValue={this.state.type}
                        value={this.state.type}
                        onChange={(val, opt) => this.onTypeSelect(val, opt)}
                    >
                        <Select.Option value={0}>全部</Select.Option>
                        <Select.Option value={1}>金币充值 60</Select.Option>
                        <Select.Option value={2}>金币充值 980</Select.Option>
                        <Select.Option value={3}>金币充值 1980</Select.Option>
                        <Select.Option value={4}>金币充值 6980</Select.Option>
                        <Select.Option value={5}>金币充值 9980</Select.Option>
                        <Select.Option value={6}>金币充值 19980</Select.Option>
                        <Select.Option value={100}>普通VIP</Select.Option>
                        <Select.Option value={101}>购买预测</Select.Option>
                        <Select.Option value={201}>超级VIP</Select.Option>
                        <Select.Option value={202}>房卷x3</Select.Option>
                        <Select.Option value={203}>房卷x5</Select.Option>
                        <Select.Option value={204}>房卷x10</Select.Option>
                    </Select>

                    <Checkbox
                        checked={this.state.timeCheck}
                        onChange={() => {
                            this.setState({
                                timeCheck: !this.state.timeCheck,
                                dateTotal: 0,
                                iosDateTotal: 0,
                                aodDateTotal: 0,
                                h5DateTotal: 0,
                            }, () => {
                                this.all()
                            })
                        }}
                    >
                        时间:
                    </Checkbox>

                    <RangePicker
                        showTime={{ format: 'HH:mm:ss' }}
                        format="YYYY-MM-DD HH:mm:ss"
                        onChange={this.onDateChange}
                        defaultValue={[
                            this.state.start,
                            this.state.end,
                        ]}
                        disabled={this.state.timeCheck === false}
                    />
                    <Popover
                        content={<div>
                            <p>总：{this.state.dateTotal}</p>
                            <p>安卓：{this.state.aodDateTotal}</p>
                            <p>IOS：{this.state.iosDateTotal}</p>
                            <p>H5：{this.state.h5DateTotal}</p>
                        </div>}
                        style={{marginLeft: '8px',}}
                    >
                        <Button style={{margin: '0 8px'}}>选中时间收入总数</Button>
                    </Popover>
                    <Button
                        disabled={!this.state.timeCheck}
                        onClick={this.excel}
                    >
                        选中时间导出Excel
                    </Button>
                </div>
                <Table
                    dataSource={this.state.list}
                    columns={this.columns}
                    pagination={false}
                    rowKey={(record, index) => index}
                />
                <PaginationFooter
                    pageIndex={this.state.p}
                    prevPage={this.prevPage}
                    nextPage={this.nextPage}
                />
            </div>

        </Admin>
    }
}

export default Money